<template>
  <div>
    <el-form
      ref="clueRemarkRefForm"
      :model="clueRemark"
      label-width="110px"
      :rules="clueRemarkRules"
      style="max-width: 95%;"
    >
      <el-form-item label="负责人">
        <div class="desc">{{ clueDetail.ownerDo.name }}&nbsp;</div>
      </el-form-item>
      <el-form-item label="所属活动">
        <div class="desc">{{ clueDetail.activityDo.name }}&nbsp;</div>
      </el-form-item>
      <el-form-item label="姓名">
        <div class="desc">{{ clueDetail.fullName }}&nbsp;</div>
      </el-form-item>
      <el-form-item label="称呼">
        <div class="desc">{{ clueDetail.appellationDo.typeValue }}&nbsp;</div>
      </el-form-item>
      <el-form-item label="手机">
        <div class="desc">{{ clueDetail.phone }}&nbsp;</div>
      </el-form-item>
      <el-form-item label="微信">
        <div class="desc">{{ clueDetail.weixin }}&nbsp;</div>
      </el-form-item>
      <el-form-item label="QQ">
        <div class="desc">{{ clueDetail.qq }}&nbsp;</div>
      </el-form-item>
      <el-form-item label="邮箱">
        <div class="desc">{{ clueDetail.email }}&nbsp;</div>
      </el-form-item>
      <el-form-item label="年龄">
        <div class="desc">{{ clueDetail.age }}&nbsp;</div>
      </el-form-item>
      <el-form-item label="职业">
        <div class="desc">{{ clueDetail.job }}&nbsp;</div>
      </el-form-item>
      <el-form-item label="年收入">
        <div class="desc">{{ clueDetail.yearIncome }}&nbsp;</div>
      </el-form-item>
      <el-form-item label="住址">
        <div class="desc">{{ clueDetail.address }}&nbsp;</div>
      </el-form-item>
      <el-form-item label="贷款">
        <div class="desc">{{ clueDetail.needLoanDo.typeValue }}&nbsp;</div>
      </el-form-item>
      <el-form-item label="意向状态">
        <div class="desc">{{ clueDetail.intentionStateDo.typeValue }}&nbsp;</div>
      </el-form-item>
      <el-form-item label="意向产品">
        <div class="desc">{{ clueDetail.intentionProductDo.name }}&nbsp;</div>
      </el-form-item>
      <el-form-item label="线索状态">
        <div class="desc">{{ clueDetail.stateDo.typeValue }}&nbsp;</div>
      </el-form-item>
      <el-form-item label="线索来源">
        <div class="desc">{{ clueDetail.sourceDo.typeValue }}&nbsp;</div>
      </el-form-item>
      <el-form-item label="线索描述">
        <div class="desc">{{ clueDetail.description }}&nbsp;</div>
      </el-form-item>
      <el-form-item label="下次联系时间">
        <div class="desc">{{ clueDetail.nextContactTime }}&nbsp;</div>
      </el-form-item>
      <el-form-item label="填写跟踪记录" prop="noteContent">
        <el-input
          v-model="clueRemark.noteContent"
          :rows="8"
          type="textarea"
        />
      </el-form-item>
      <el-form-item label="跟踪方式" prop="noteWay">
        <el-select
          v-model="clueRemark.noteWay"
          placeholder="请选择跟踪方式"
          style="width: 100%"
          @click="loadDicValue('noteWay')"
          clearable
        >
          <el-option
            v-for="item in noteWayOptions"
            :key="item.id"
            :label="item.typeValue"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="clueRemarkSubmit">提 交</el-button>
        <el-button type="success" @click="convertCustomer" v-if="clueDetail.state !== -1">转换客户</el-button>
        <el-button type="success" plain @click="goback">返 回</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="clueRemarkList"
      style="width: 100%"
    >
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="noteWayDo.typeValue" label="跟踪方式" />
      <el-table-column prop="noteContent" label="跟踪内容" :show-overflow-tooltip="true" />
      <el-table-column property="createTime" label="跟踪时间" />
      <el-table-column property="createByDo.name" label="跟踪人" />
      <el-table-column property="editTime" label="编辑时间" />
      <el-table-column property="editByDo.name" label="编辑人" />
      <el-table-column label="操作">
        <template #default="scope">
          <a href="javascript:" @click="edit(scope.row.id)">编辑</a>
          &nbsp;
          <a href="javascript:" @click="del(scope.row.id)">删除</a>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="total"
      @prev-click="toPage"
      @next-click="toPage"
      @current-change="toPage"
    />

      <!--线索转换为客户的弹窗（对话框）-->
    <el-dialog v-model="convertCustomerDialogVisible" title="线索转换客户" width="55%" center>
      <el-form ref="convertCustomerRefForm" :model="customerQuery" label-width="110px" :rules="convertCustomerRules">
        <el-form-item class="customerFormStyle" label="意向产品" prop="product">
          <el-select v-model="customerQuery.product" placeholder="请选择" style="width: 100%;" @click="loadDicValue('product')">
            <el-option
              v-for="item in productOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="customerFormStyle" label="客户描述" prop="description">
          <el-input
            v-model="customerQuery.description"
            :rows="8"
            type="textarea"
            placeholder="请输入客户描述"
          />
        </el-form-item>
        <el-form-item label="下次跟踪时间" prop="nextContactTime">
          <el-date-picker
            v-model="customerQuery.nextContactTime"
            type="datetime"
            style="width: 100%;"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择下次跟踪时间"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="convertCustomerDialogVisible = false">关 闭</el-button>
          <el-button type="primary" @click="convertCustomerSubmit">转 换</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { doGet, doPost } from '../http/httpRequest'
import { goback, messageTip } from '../util/util'

export default {
  name: 'ClueDetailView',
  inject: ['reload'],
  data() {
    return {
      // 线索详情对象
      clueDetail: {
        ownerDo : {},
        activityDo : {},
        appellationDo : {},
        needLoanDo : {},
        intentionStateDo : {},
        intentionProductDo : {},
        stateDo : {},
        sourceDo  : {}
      },
      // 线索跟踪记录对象
      clueRemark: {},
      // 跟踪方式的下拉选项
      noteWayOptions: [],
      // 线索跟踪记录列表
      clueRemarkList: [{
        noteWayDo: {},
        createByDo: {},
        editByDo: {}
      }],
      pageSize: 0,
      total: 0,
      customerQuery: {},
      convertCustomerDialogVisible: false,
      convertCustomerRules: {
        product: [
          { required: true, message: '请选择意向产品', trigger: ['blur', 'change'] }
        ],
        description: [
          { required: true, message: '客户描述不能为空', trigger: 'blur' },
          { min: 5, max: 255, message: '客户描述长度为5-255个字符', trigger: 'blur' }
        ],
        nextContactTime: [
          { required: true, message: '请选择下次联系时间', trigger: 'blur' }
        ]
      },
      // 意向产品的下拉选项
      productOptions: []
    }
  },
  mounted() {
    this.loadClueDetail()
    this.loadClueRemarkList(1)
  },
  methods: {
    goback,
    // 加载线索详情
    loadClueDetail() {
      let id = this.$route.params.id
      doGet('/api/clue/detail/' + id, {}).then(resp => {
        if(resp.data.code === 200) {
          this.clueDetail = resp.data.data
        }
      })
    },
    // 提交线索跟踪记录
    clueRemarkSubmit() {
      doPost('/api/clue/remark', {
        clueId: this.clueDetail.id,
        noteContent: this.clueRemark.noteContent,
        noteWay: this.clueRemark.noteWay
      }).then(resp => {
        if(resp.data.code === 200) {
          messageTip('提交成功', 'success')
          this.reload()
        } else {
          messageTip('提交失败', 'error')
        }
      })
    },
    loadDicValue(typeCode) {
      doGet("/api/dicvalue/" + typeCode, {}).then( resp => {
        if (resp.data.code === 200) {
          if (typeCode === 'noteWay') {
            this.noteWayOptions = resp.data.data
          } else if (typeCode === 'product') {
            this.productOptions = resp.data.data
          }
        }
      })
    },
    // 加载线索历史跟踪记录列表
    loadClueRemarkList(current) {
      doGet('/api/clue/remark', {
        current: current,
        clueId: this.$route.params.id
      }).then(resp => {
        if(resp.data.code === 200) {
          this.clueRemarkList = resp.data.data.list
          this.pageSize = resp.data.data.pageSize
          this.total = resp.data.data.total
        }
      })
    },
    // 分页
    toPage(current) {
      this.loadClueRemarkList(current)
    },
    // 转换客户
    convertCustomer() {
      this.convertCustomerDialogVisible = true
    },
    // 线索转换客户
    convertCustomerSubmit() {
      this.$refs.convertCustomerRefForm.validate(isValid => {
        if(isValid) {
          doPost('/api/clue/customer', {
            clueId: this.clueDetail.id,
            product: this.customerQuery.product,
            description: this.customerQuery.description,
            nextContactTime: this.customerQuery.nextContactTime
          }).then(resp => {
            if(resp.data.code === 200) {
              messageTip('转换成功', 'success')
              this.reload()
            } else {
              messageTip('转换失败', 'error')
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>
  .desc {
    background-color: #f0ffff;
    width: 100%;
    padding-left: 10px;
  }
  .customerFormStyle {
    margin-bottom: 20px;
  }
</style>